<!DOCTYPE html>
<meta charset="utf8" />
<title>Table demo</title>

<style>
  body {
    max-width: 50em;
    font-family: Georgia;
  }

  .ProseMirror-menubar-wrapper {
    border: 1px solid silver;
    outline: none;
  }

  .ProseMirror {
    padding: 5px 15px;
  }

  .ProseMirror table {
    margin: 0;
  }

  .ProseMirror th,
  .ProseMirror td {
    min-width: 1em;
    border: 1px solid #ddd;
    padding: 3px 5px;
  }

  .ProseMirror .tableWrapper {
    margin: 1em 0;
  }

  .ProseMirror th {
    font-weight: bold;
    text-align: left;
  }
</style>

<h1>Table demo</h1>

<div style="display: none" id="content">
  <h2>Example content</h2>
  <p>The table:</p>
  <table>
    <tr>
      <th colspan="3" data-colwidth="100,0,0">Wide header</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
    </tr>
  </table>
</div>

<div id="editor"></div>

<script type="module" src="./demo.ts"></script>
